<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>业务管理</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport"
        content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8"/>
  <link rel="stylesheet" href="${re.contextPath}/plugin/layui/css/layui.css">
  <link rel="stylesheet" href="${re.contextPath}/plugin/lenos/main.css">
  <script type="text/javascript" src="${re.contextPath}/plugin/jquery/jquery-3.2.1.min.js"></script>
  <script type="text/javascript" src="${re.contextPath}/plugin/layui/layui.all.js"
          charset="utf-8"></script>
    <script type="text/javascript" src="${re.contextPath}/plugin/tools/tool.js"></script>

</head>

<body>
<div class="lenos-search">
  <div class="select" >
    <div class="layui-form-item">
      业务名称:
      <div class="layui-inline">
        <input class="layui-input" height="20px" id="name" autocomplete="off">
      </div>
      业务类型名称：
      <div class="layui-inline">
        <select name="serviceTypeId" id="serviceTypeId"  class="search_input" style="height:30px;width:120px;" lay-search></select>
      </div>
    业务分类名称：
    <div class="layui-inline">
      <select name="serviceKindId" id="serviceKindId"  class="search_input" style="height:30px;width:120px;" lay-search></select>
    </div>
      所属部门：
      <div class="layui-inline">
        <select name="sysOfficeId" id="sysOfficeId"  class="search_input" style="height:30px;width:120px;" lay-search></select>
      </div>
    <button class="select-on layui-btn layui-btn-sm" data-type="select"><i class="layui-icon"></i>
    </button>
    <button class="layui-btn layui-btn-sm icon-position-button" id="refresh" style="float: right;"
            data-type="reload">
      <i class="layui-icon">ဂ</i>
    </button>
  </div>
  </div>
</div>
<div class="layui-col-md12" style="height:40px;margin-top:3px;">
  <div class="layui-btn-group">
      <@shiro.hasPermission name="service:add">
      <button class="layui-btn layui-btn-normal" data-type="add">
      <i class="layui-icon">&#xe608;</i>新增
    </button>
      </@shiro.hasPermission>
  </div>
</div>
<table id="serviceList" class="layui-hide" lay-filter="user"></table>
<script type="text/html" id="barDemo">
<@shiro.hasPermission name="service:select">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
</@shiro.hasPermission>
<@shiro.hasPermission name="service:update">
  <a class="layui-btn layui-btn-xs  layui-btn-normal" lay-event="edit">编辑</a>
</@shiro.hasPermission>
<@shiro.hasPermission name="service:del">
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</@shiro.hasPermission>
</script>
<script type="text/html" id="serviceTypeTpl">
  <option value=""></option>
  {{#layui.each(d.list,function(index,item){ }}
  <option  value="{{item.id}}" {{item.checked==true?'selected':''}} >{{item.name}}</option>
  {{# }); }}
  {{# if(d.list.length==0){ }}
  无数据
  {{# }}}
</script>

<script type="text/html" id="sysOfficeTpl">
  <option value=""></option>
  {{#layui.each(d.list,function(index,item){ }}
  <option  value="{{item.id}}" {{item.checked==true?'selected':''}} >{{item.name}}</option>
  {{# }); }}
  {{# if(d.list.length==0){ }}
  无数据
  {{# }}}

</script>
<script type="text/html" id="loadServiceType">
  {{loadName('/type/get',d.serviceTypeId,'name')}}
</script>
<script type="text/html" id="loadServiceKind">
  {{loadName('/kind/get',d.serviceKindId,'name')}}
</script>
<script type="text/html" id="loadOffice">
  {{loadName('/office/get',d.sysOfficeId,'name')}}
</script>
<script>
 function loadName(url,id,val){
        var name="";
        $.ajax({
            type:'GET',
            url:url,
            data:{
              id:id
            },
            dataType:'json',
            async: false,
            success:function(res){
                if(res.flag){
<!--                   console.log(res);-->
                  name = res.jsonObj.data[val];
<!--                  console.log(dictName);-->

                }
            },
            error:function(){
                console.log('加载异常')
            }
        });
        return name;

    }

  document.onkeydown = function (e) { // 回车提交表单
    var theEvent = window.event || e;
    var code = theEvent.keyCode || theEvent.which;
    if (code == 13) {
      $(".select .select-on").click();
    }
  }
  layui.use(['table','laytpl','form'], function () {
    var table = layui.table,laytpl = layui.laytpl,form = layui.form;
    //方法级渲染
    table.render({
      id: 'serviceList',
      elem: '#serviceList'
      , url: 'showServiceList'
      , cols: [[
        {checkbox: true, fixed: true, width: '5%'}
        , {field: 'name', title: '业务名称', width: '15%', sort: true}
        , {field: 'serviceTypeId', title: '业务类型名称', width: '10%', sort: true,templet:'#loadServiceType'}
        , {field: 'serviceKindId', title: '业务分类名称', width: '15%', sort: true,templet:'#loadServiceKind'}
        , {field: 'sysOfficeId', title: '所属部门', width: '15%', sort: true,templet:'#loadOffice'}
        , {field: 'remarks', title: '备注', width: '20%'}
        , {field: 'id', title: '操作', width: '20%', toolbar: "#barDemo"}
      ]]
      , page: true,
      height: 'full-83'
    });

    var $ = layui.$, active = {
      select: function () {
        var name = $('#name').val();
        var serviceTypeId = $("#serviceTypeId").val();
        table.reload('serviceList', {
          where: {
            name: name,
            serviceTypeId:serviceTypeId
          }
        });
      },
      reload:function(){
       $('#name').val('');
       $("#serviceTypeId").val('');
        table.reload('serviceList', {
          where: {
           name:null,
           serviceTypeId:null
          }
        });
      },
      add: function () {

        add('添加业务', 'addService');
      },
      update: function () {
        var checkStatus = table.checkStatus('kindList')
            , data = checkStatus.data;
        if (data.length != 1) {
          layer.msg('请选择一行编辑,已选['+data.length+']行', {icon: 5});
          return false;
        }
        update('编辑业务', 'updateService?id=' + data[0].id);
      },
      detail: function () {
        var checkStatus = table.checkStatus('kindList')
            , data = checkStatus.data;
        if (data.length != 1) {
          layer.msg('请选择一行查看,已选['+data.length+']行', {icon: 5});
          return false;
        }
        detail('查看用户信息', 'updateDict?id=' + data[0].id);
      }
    };

    //监听表格复选框选择
    table.on('checkbox(user)', function (obj) {
      console.log(obj)
    });
    //监听工具条
    table.on('tool(user)', function (obj) {
      var data = obj.data;
      if (obj.event === 'detail') {
        detail('查看业务', 'showService?id=' + data.id+'&detail=readonly');
      } else if (obj.event === 'del') {
        layer.confirm('确定删除[<label style="color: #00AA91;">' + data.name + '</label>]?', {
          btn: ['逻辑删除', '物理删除']
        }, function () {
            toolDelByFlag(data.id,'serviceList',true);
        }, function () {
            toolDelByFlag(data.id,'serviceList',false);
        });
      } else if (obj.event === 'edit') {
        update('编辑业务分类', 'showService?id=' + data.id);
      }
    });

    $('.layui-col-md12 .layui-btn').on('click', function () {
      var type = $(this).data('type');
      active[type] ? active[type].call(this) : '';
    });
    $('.select .layui-btn').on('click', function () {
      var type = $(this).data('type');
      active[type] ? active[type].call(this) : '';
    });

    loadType('/type/loadAllServiceType','serviceTypeTpl','serviceTypeId');
    loadType('/office/loadAllOffice','sysOfficeTpl','sysOfficeId');
    function loadType(url,templateId,divId){
        $.ajax({
           url:url,
           type:'get',
            async: false,
           success:function(res){
<!--                console.log(res);-->
                if(res.flag){
                    var data={},list=[];
                    data.title=res.msg;

                    res.jsonObj.data.forEach(function(value,index){

                          list.push(value);


                     },this);
                     data.list = list;
                    loadTpl(data,templateId,divId);
                }
           },
           beforeSend:function(){
<!--              layer.msg('加载中');-->
           }
        });
  }
  function loadTpl(data,templateId,divId){

    var getTpl = document.getElementById(templateId).innerHTML
                    ,view = document.getElementById(divId);
     laytpl(getTpl).render(data,function(html){
           view.innerHTML=html;
     });

     form.render('select');


  }

  });

  function detail(title, url, w, h) {
    if (title == null || title == '') {
      title = false;
    };
    if (url == null || url == '') {
      url = "error/404";
    };
    if (w == null || w == '') {
      w = ($(window).width() * 0.9);
    };
    if (h == null || h == '') {
      h = ($(window).height() - 50);
    };
    layer.open({
      id: 'user-detail',
      type: 2,
      area: [w + 'px', h + 'px'],
      fix: false,
      maxmin: true,
      shadeClose: true,
      shade: 0.4,
      title: title,
      content: url + '&detail=true',
      // btn:['关闭']
    });
  }
  /**
   * 更新用户
   */
  function update(title, url, w, h) {
    if (title == null || title == '') {
      title = false;
    }
    if (url == null || url == '') {
      url = "404.html";
    }
    if (w == null || w == '') {
      w = ($(window).width() * 0.9);
    }
    if (h == null || h == '') {
      h = ($(window).height() - 50);
    }
    layer.open({
      id: 'user-update',
      type: 2,
      area: [w + 'px', h + 'px'],
      fix: false,
      maxmin: true,
      shadeClose: false,
      shade: 0.4,
      title: title,
      content: url + '&detail=false'
    });
  }

  /*弹出层*/
  /*
   参数解释：
   title   标题
   url     请求的url
   id      需要操作的数据id
   w       弹出层宽度（缺省调默认值）
   h       弹出层高度（缺省调默认值）
   */
  function add(title, url, w, h) {
    if (title == null || title == '') {
      title = false;
    }
    ;
    if (url == null || url == '') {
      url = "404.html";
    }
    ;
    if (w == null || w == '') {
      w = ($(window).width() * 0.9);
    }
    ;
    if (h == null || h == '') {
      h = ($(window).height() - 50);
    }
    ;
    layer.open({
      id: 'user-add',
      type: 2,
      area: [w + 'px', h + 'px'],
      fix: false,
      maxmin: true,
      shadeClose: false,
      shade: 0.4,
      title: title,
      content: url
    });
  }
 $(document).on('change','#serviceTypeId',function(){
      var serviceTypeId = $("#serviceTypeId").val();
      if(serviceTypeId){
        $.ajax({
          url:"/kind/getKindList",
          data:{
            serviceTypeId:serviceTypeId
          },
          type:"get",
          dataType:"json",
          success:function(res){
              if(res.flag){
               $("#serviceKindId").empty();
                   var html="<option></option>";
                   $(res.jsonObj.data).each(function(v,k){
                      html+="<option value='"+k.id+"'>"+k.name+"</option>";
                    });
                $("#serviceKindId").append(html);
              }
          },
          error:function(){
            console.log("服务器异常");
          }

        });
      }else{
        $("#serviceKindId").empty();
      }
  });
</script>
</body>

</html>
